<template>
  <view class="container">
    <!-- 切换选项 -->
    <view class="tabs">
      <text
        :class="['tab', activeTab === 'all' ? 'active' : '']"
        @click="switchTab('all')"
      >
        全部
      </text>
      <text
        :class="['tab', activeTab === 'good' ? 'active' : '']"
        @click="switchTab('good')"
      >
        好评
      </text>
      <text
        :class="['tab', activeTab === 'bad' ? 'active' : '']"
        @click="switchTab('bad')"
      >
        差评
      </text>
    </view>

    <!-- 提取的评论 -->
    <view class="extracted-comments" v-if="extractedComments.length > 0">
      <text class="extracted-title">提取的评论：</text>
      <view class="extracted-list">
        <text
          v-for="(comment, index) in extractedComments"
          :key="index"
          class="extracted-item"
        >
          {{ comment }}
        </text>
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="review-list">
      <view
        class="review"
        v-for="(review, index) in filteredReviews"
        :key="index"
      >
        <text>{{ review.name }}</text>
        <text>{{ review.time }}    {{ review.rating }}</text>
        <text>{{ review.comment }}</text>
      </view>

      <!-- 无评论提示 -->
      <view v-if="filteredReviews.length === 0" class="no-reviews">
        <text>暂无相关评论</text>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="tip">
      <text>提示：隐藏部分对您帮助不大的评价。</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的选项卡
      activeTab: "all",
      // 评论数据
      reviews: [
        {
          name: "陈女士",
          time: "1周前",
          rating: "好评",
          comment: "职位真实",
        },
        {
          name: "李先生",
          time: "2周前",
          rating: "差评",
          comment: "回复速度慢",
        },
        {
          name: "王女士",
          time: "3周前",
          rating: "好评",
          comment: "职位真实，回复快",
        },
      ],
      // 提取的评论关键词
      extractedKeywords: ["职位真实", "回复快"],
    };
  },
  computed: {
    // 根据当前选项卡过滤评论
    filteredReviews() {
      if (this.activeTab === "all") {
        return this.reviews;
      } else if (this.activeTab === "good") {
        return this.reviews.filter((review) => review.rating === "好评");
      } else if (this.activeTab === "bad") {
        return this.reviews.filter((review) => review.rating === "差评");
      }
      return [];
    },
    // 提取的评论
    extractedComments() {
      return this.extractedKeywords.filter((keyword) => {
        return this.filteredReviews.some((review) =>
          review.comment.includes(keyword)
        );
      });
    },
  },
  methods: {
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab;
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.tab {
  padding: 10px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.tab.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.extracted-comments {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.extracted-title {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.extracted-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.extracted-item {
  padding: 5px 10px;
  background-color: #e0f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #00796b;
}

.review-list {
  margin-bottom: 20px;
}

.review {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.review text {
  display: block;
  margin: 5px 0;
}

.no-reviews {
  text-align: center;
  color: #999;
  padding: 20px;
}

.tip {
  margin-top: 20px;
  font-size: 0.9em;
  color: #666;
}
</style>